<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<title>施工预约详情</title>
<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />
<script type="text/javascript" src="../../libs/vue.js" ></script>
<script type="text/javascript" src="../../js/jquery.1.9.1.min.js" ></script>
<script type="text/javascript" src="../../js/app/url.js" ></script>
<script type="text/javascript" src="../../libs/hui.js" ></script>
<script type="text/javascript" src="../../js/s_plus.js" ></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/app/api.js"></script>
<script type="text/javascript" src="../../js/control/swal/sweetalert.min.js"></script>
<link rel="stylesheet" href="../../js/control/swal/sweetalert.css" /

</head>
<body>
	<div id="wrapper">
<header class="f_l maxbox subhead">
  <a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
  <h1>施工预约详情</h1>
</header>


<section class="f_l maxbox txt_list">
<p><em>标题：</em>{{risk.title}}</p>
  <p><em>施工状态：</em>{{showState(risk.constructionState)}}</p>
    <p><em>时间：</em>{{geshi(risk.startTime)}} ~ {{geshi(risk.endTime)}}</p>
  <p><em>施工地址：</em>{{risk.address}}</p>

</section>
<section id="zdxx" class="f_l maxbox block mar_t">
  <dl>
    <dt>
      <h2>终端信息</h2>
    </dt>
    
    <div v-for="item in lists">

    <dd class="txt_list">
      <p><em>设备编号：</em>{{item.zdId.termimalCode}}</p>
      <p><em>工程地址：</em>{{item.zdId.belongStreet}}</p>	
      <p><em>告警状态：</em><span class="mar_r green">{{showStatus(item.zdId.status)}}</span><!--<span class="mar_r orange">异常</span>--></p>
      <p><em>设备状态：</em><span class="mar_r green">{{showCheckStatus(item.zdId.checkStatus)}}</span><!--<span class="mar_r orange">异常</span>--></p>

    </dd>
    <dd class="f_l img_list" style="margin-top:-20px;">
      <!--<ul>
        <li><img src="../../images/map.jpg" alt="" /></li>
        <li><img src="../../images/map.jpg" alt="" /></li>
      </ul>-->
      
      <!--{{item.imgUrl}}-->
      
      <ul v-if="item.zdId.imgUrl!=''">
					
			<li  v-for="it in  cutImgs(item.zdId.imgUrl)"><img class="imgs" @click="showImg($event)"  :src="it" /></li>

				</ul>
      
    </dd>
    
    </div>
    <!--<dd class="txt_list">
      <p><em>设备编号：</em>4546332163</p>
      <p><em>工程地址：</em>成都市武侯区高朋大道11号附近</p>	
      <p><em>作业状态：</em><span class="mar_r red">未完成</span></p>
    </dd>
    <dd class="f_l img_list" style="margin-top:-20px;">
      <ul>
        <li><img src="../../images/map.jpg" alt="" /></li>
        <li><img src="../../images/map.jpg" alt="" /></li>
      </ul>
    </dd>
    <dd class="txt_list">
      <p><em>设备编号：</em>4546332163</p>
      <p><em>工程地址：</em>成都市武侯区高朋大道11号附近</p>	
      <p><em>作业状态：</em><span class="mar_r green">完成</span><span class="mar_r green">正常</span></p>
    </dd>-->
  </dl>
</section>
<!--<section class="f_l img_list">
  <ul>
    <li><img src="../../images/map.jpg" alt="" /></li>
    <li><img src="../../images/map.jpg" alt="" /></li>
    <li><img src="../../images/map.jpg" alt="" /></li>
    <li><img src="../../images/map.jpg" alt="" /></li>
  </ul>
</section>-->


<section class="f_l maxbox mar_t mar_f t_c">
	
	<!--{{#if risk.constructionState=='20'}}-->
	<a v-if="risk.constructionState=='20'" class="btn mian_btn" @click="submitData">已完成</a>
	<!--{{/if}}-->
</section>

</div>


	
		<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe-ui-default.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="../../js/control/phoneswipe/photoswipe.css" type="text/css" />		
		<!-- 以下为 phoneSwipe 插件 dom 复制即可 -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container" style="overflow:visible;">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="关闭"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

    <script>
    		function previewImg(index){
    			console.log("index---"+index);
					var pswpElement = document.querySelectorAll('.pswp')[0];
					var items = [];
					//获取图片数据并填充近数组
					hui('.imgs').each(function(eimg){
					
						console.log(JSON.stringify(eimg));

						console.log("eimg.getAttribute('src')---"+ eimg.getAttribute('src'));
						var imgObj = {src:eimg.getAttribute('src'), w:eimg.naturalWidth, h:eimg.naturalHeight};
						items.push(imgObj);
					});
					var options = {index: index};
					var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
				}
    	
    	var sp = new Vue({
			el: "#wrapper",
			data: {
				risk: {},
				lists:[]
			},
			methods: {
					showImg:function(e){
						  var index = $(e.currentTarget).index();
			    		previewImg(index);
					},
					cutImgs:function(imgUrl){
						if(imgUrl!=null&&imgUrl!=''){
							return imgUrl.split(",");
						}
					},
					showCheckStatus:function(status){
//							0异常 1正常2未打卡
							if(status=='0'){
									return "异常";
								}
								else if(status=='1'){
									return "正常";
								}
								else if(status=='2'){
									return "未打卡";
								}
								else{
									return "";
			
								}
						},
						showStatus:function(status){
	
					if(status=='0'){
						return "无告警	";
					}
					else if(status=='1'){
						return "一般告警";
					}
						else if(status=='2'){
						return "严重告警";
					}
					else{
						return "工单处理";

					}
				},
				back: function() {
					hui.back();
				},
		
				submitData:function() {
							update();
				},
		
				add: function() {
					var timestamp = new Date().getTime();
					hui.open("risk_add.html?date=" + timestamp, {}, true, {});
				},
		
				geshi: function(param) {
					return formatTime(param);
				},
		
				showState: function(param) {
				//10-新建，20-已确认，30-已完成
					if(param == '10') {
						return "新建";
					} else if(param == '20') {
						return "已确认";
					} else {
						return "已完成";
		
					}
				}
		
			},
			mounted: function() {
				loadDetail();
			}
		});


//				loadDetail();
				function loadDetail(){
//					alert('222');
					var pid=localStorage.getItem("pid");
					var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
				  	var time = apiManage.getNow();
				  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
				  	var paramKey=hex_md5(key);
				  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
				     console.log("jsonParam:  "+jsonParam);
						var path = urlManager.constructionReservation()+"?id="+pid;
						
						console.log("path:  "+path);

								  	$.ajax({
						         type: "GET",
						         url: path,
						         beforeSend: function(request) {
						            request.setRequestHeader("loginName",username);
						            request.setRequestHeader("time",time);
						            request.setRequestHeader("sign",paramKey);
						            request.setRequestHeader("Content-Type","application/text");
						
						         },
						         success: function(result) {
						          	console.log("施工预约详情:"+JSON.stringify(result));
																		sp.risk=result;
									sp.lists=result.zds;
									if(sp.lists==null){
										$("#zdxx").hide();
									}
									
									
				
								}		 
						             
						         
						     });
				  
					
					
				}
				
				
				
				function update(){
					var pid=localStorage.getItem("pid");
					var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
				  	var time = apiManage.getNow();
				  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
				  	var paramKey=hex_md5(key);
				  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
				     console.log("jsonParam:  "+jsonParam);
						var path = urlManager.saveCompleted()+"?id="+pid;
						
						console.log("path:  "+path);

								  	$.ajax({
						         type: "GET",
						         url: path,
						         beforeSend: function(request) {
						            request.setRequestHeader("loginName",username);
						            request.setRequestHeader("time",time);
						            request.setRequestHeader("sign",paramKey);
						            request.setRequestHeader("Content-Type","application/text");
						         },
						         success: function(result) {
						          	console.log("施工预约已完成:"+JSON.stringify(result));
				
				
				

							         		swal({
												  title: "保存成功",
												  text: result.error_msg,
												  type: "success",
												  showCancelButton: false,
												  confirmButtonColor: "#DD6B55",
												  confirmButtonText: "确认",
												  cancelButtonText: "取消",
												  closeOnConfirm: true,
												  closeOnCancel: false
												},
												function(isConfirm){
												  if (isConfirm) {
														hui.open("order_list.html?time="+apiManage.getNow(), {}, true, {});	
												  } else {
												  }
												});

		         	
				
				
										}		 
						             
						         
						     });
				  
					
					
				}
				
				    Date.prototype.format = function (format) //author: meizz
	    {
	        var o = {
	            "M+": this.getMonth() + 1, //month
	            "d+": this.getDate(),    //day
	            "h+": this.getHours(),   //hour
	            "m+": this.getMinutes(), //minute
	            "s+": this.getSeconds(), //second
	            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
	            "S": this.getMilliseconds() //millisecond
	        }
	        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
	        (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	        for (var k in o) if (new RegExp("(" + k + ")").test(format))
	            format = format.replace(RegExp.$1,
	          RegExp.$1.length == 1 ? o[k] :
	            ("00" + o[k]).substr(("" + o[k]).length));
	        return format;
	    }

	    function formatTime(val) {
	    	if(val==null||val==''){
	    		return "";
	    	}
	        var re = /-?\d+/;
	        var m = re.exec(val);
//	         m = m.replace(/\-/g, "/");
	        var d = new Date(parseInt(m[0]));
	        
	       
	        // 按【2012-02-13 09:09:09】的格式返回日期
//	        var tmp  = d.format("yyyy-MM-dd hh:mm:ss");
//	        console.log("格式化时间:   "+tmp);
	        return d.format("yyyy-MM-dd hh:mm:ss");
	    }


    </script>
</body>
</html>